<template>
  <div class="container">
    <table-filter>
      <el-input
          placeholder="请输入机构名称"
          clearable
          v-model="apiSetting.data.orgaName"
      >
      </el-input>
      <SelectCity
          @proClick="proClick"
          @cityClick="cityClick"
          :Province="apiSetting.data.provinceId"
          :cityCode="apiSetting.data.cityId"
        ></SelectCity>
      <el-button plain type="warning" @click="search">查询</el-button>
    </table-filter>
    <el-row>
      <el-button plain type="primary" @click="showEaDialog = true"
      >添加学校
      </el-button
      >
    </el-row>
    <data-table
        ref="dtb"
        v-if="!isReRender"
        :api-setting="apiSetting"
        lazy
        :load="lazyLoad"
        pagination
        row-key="organizecode"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column
          fixed
          prop="organizename"
          label="机构名称"
          width="270"
          show-overflow-tooltip
      />
      <el-table-column
          prop="organizecode"
          label="机构编码"
          width="130"
          show-overflow-tooltip
      />
      <el-table-column
          prop="description"
          label="描述"
          width="300"
          show-overflow-tooltip
      />
			<el-table-column
			    prop="province"
			    label="省"
			    width="100"
			    show-overflow-tooltip
			/>
			<el-table-column
			    prop="city"
			    label="市"
			    width="100"
			    show-overflow-tooltip
			/>
      <el-table-column label="更新时间" width="200" show-overflow-tooltip>
        <template slot-scope="{ row }">
          {{ row.updatedate | formatterDate }}
        </template>
      </el-table-column>
        <el-table-column label="是否采购" width="150">
            <template slot-scope="{ row }">
                <el-switch
                        v-if="row.hasChildren !== null"
                        v-model="row.isPurchase"
                        :active-value="1"
                        :inactive-value="0"
                        @change="purchaseOrga($event, row)"
                        active-text="是"
                        inactive-text="否"
                >
                </el-switch>
            </template>
        </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="{ row }">
         <el-button
             v-if="row.hasChildren !== null"
             @click="setCourseware(row)"
             type="text"
             size="small"
         >设置课件权限
         </el-button>
					<el-button
              v-if="row.hasChildren !== null"
              @click="addCollege(row)"
              type="text"
              size="small"
          >添加学院
          </el-button>
          <el-button
              v-if="row.hasChildren !== null"
              @click="updateStatus(row)"
              type="text"
              size="small"
              :class="row.isEnable?'danger':'success'"
          >{{ row.isEnable ? '禁用' : '启用' }}
          </el-button>
          <el-button class="warning" @click="edit(row)" type="text" size="small"
          >编辑
          </el-button>
          <el-button
              @click="
              delRow(
                `/sys/sysOrganize/DeleteForm/${row.organizecode}`,
                row.hasChildren === null ? '学院' : '机构'
              )
            "
              class="danger"
              type="text"
              size="small"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </data-table>
    <ea-org
        ref="eaDialog"
        :show.sync="showEaDialog"
		    :dialogvisible="showEaDialog"
        @on-reload="$refs.dtb.loadData()"
    />
		<!-- 新增设置权限弹窗 -->
		<el-dialog title="设置课件权限" width="600px" :visible.sync="showCourDialog" center>
		   <el-form  status-icon  ref="ruleForm2" label-width="60px" class="demo-ruleForm">
		 <el-form-item label="课件" prop="num">
		  <el-cascader
			    :options="courData"
					v-model="courSetData"
					ref="refSelect"
					 :key="new Date().getTime()"
					 :show-all-levels="false"
		       placeholder="请选择课件"
		       :props="optionProps"
		       clearable
					 multiply
		   ></el-cascader>
		  </el-form-item>
		</el-form>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="showCourDialog = false">取 消</el-button>
		    <el-button type="primary" @click="courSubmit" >保存</el-button>
		  </div>
		</el-dialog>
  </div>
</template>

<script>
import EaOrg from "./EaOrg";
import dtb from "@/mixins/refs/dtb";
import eaDialog from "@/mixins/refs/eaDialog";
import deleteRow from "@/mixins/dataTable/deleteRow";
import tbSearch from "@/mixins/dataTable/tbSearch";
import SelectCity from "@/views/component/selectCity";

export default {
  name: "index",
  components: {EaOrg , SelectCity},
  mixins: [tbSearch, deleteRow, dtb, eaDialog],
  data() {
    return {
      cityChose:[],
      apiSetting: {
        method: "post",
        url: "/sys/sysOrganize/GetOrgAllList",
        data: {
          orgaName: "",
          provinceId: "", //省份ID
          cityId: "" //市ID
        }
      },
      isReRender: false,
			showCourDialog:false,//设置学院弹窗
			courData: [],//获取到的课件权限
		  courSetData:[],//已经设置的课件权限
			curOrgaCode:'',//当前选中的机构
		  optionProps: {
		       multiple:'权限',
		       value: 'code',
		       label: 'name',
		       emitPath: false
		    }
    };
  },
  watch: {
    "showEaDialog": {
      handler(n) {
        if (!n) {
          this.isReRender = true;
          this.$nextTick(() => {
            this.isReRender = false;
          });
        }
      }
    }
 },
  methods: {
     proClick(e) {
      //从城市组件接收到的数据
      this.apiSetting.data.provinceId = e;
    },
    cityClick(e) {
      //从城市组件接收到的数据
      this.apiSetting.data.cityId = e;
    },
		//设置课件权限
		setCourseware(row){
			this.showCourDialog = true;
			this.curOrgaCode=row.organizecode
			this.axios
			    .post('/sys/sysOrganize/getSchoolCource/'+this.curOrgaCode)
			    .then(res => {
						this.courSetData = res.map(x => x);
			});
			this.axios
			    .get("/sys/courseware/getSubResource")
			    .then(res => {
			      this.courData = Array.from(res);
			});
		},
		//提交课件设置权限
		courSubmit(){
			let courPar={
				'courseIds':this.courSetData,
				'orgaCode':this.curOrgaCode
			}
			this.axios
			    .post('/sys/sysOrganize/checkSchoolCource',courPar)
			    .then(res => {
						this.showCourDialog = false;
			});
		},
    edit(row) {
      this.axios
          .get("/sys/sysOrganize/ReadOne", {
            params: {
              keyValue: row.organizecode
            }
          })
          .then(res => {
            this.showEaDialog = true;
            this.eaDialog.setEditData({
              singleData: res
            });
          });
    },
    updateStatus(row) {
      const {organizecode, isEnable} = row
      const newStatus = isEnable ? 0 : 1
      this.axios.put(`/sys/sysOrganize/enableOrga/${organizecode}/${newStatus}`).then(res => {
        this.$notify[newStatus ? 'success' : 'error'](newStatus ? '已启用！' : '已禁用！')
        row.isEnable = newStatus
      })
    },
    addCollege(row) {
      this.showEaDialog = true;
      this.$nextTick(() => {
        this.eaDialog.$data.singleData.pcode = row.organizecode;
        this.eaDialog.$data.singleData.level = 2;
      });
    },
    lazyLoad(tree, treeNode, resolve) {
      this.axios
          .get("/sys/sysOrganize/GetOrgAllListSub", {
            params: {
              pcode: tree.organizecode
            }
          })
          .then(resolve);
    },
    purchaseOrga(status, { organizecode }) {
      this.axios
          .put(`/sys/sysOrganize/purchaseOrga/${organizecode}/${status}`)
          .then(res => {
              this.$notify.success("更改学校采购状态成功！");
          });
    }
  }
};
</script>

<style scoped>
	.demo-ruleForm .el-cascader{
		 width: 100%;
  }
  .proSelect {
    width: auto;
  }
</style>
